<template>
        <div class="header">
          <div class="text">订单</div>
          <div class="location">
            <van-icon name="location" />
            <span>南职C-201</span>
            <van-icon name="arrow" />
          </div>
        </div>

    <div class="content">

        <div class="table-container">
            <table>
                <tr>
                    <th>点单编号</th>
                    <th>商品列表</th>
                    <th>订单总价</th>
                    <th>订单数量</th>
                </tr>
                <tr v-for="o in orders">
                    <td>{{o.orderId}}</td>
                    <td>{{o.titles}}</td>
                    <td>{{o.price}}</td>
                    <td>{{o.totalcoint}}</td>
                </tr>
            </table>
   
        </div>
        <Footer />
    </div>
</template>

<style scoped>
    .header {
      background-image: linear-gradient(#ffc400, #fff);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 5px 40px 5px;
      .text {
        font-size: 12px;
        font-weight: 600px;
      }
      .location {
        span {
          margin: 0 5px;
        }
        font-size: 10px;
      }
  }
.content {
    padding: 5vw; /* 使用视口宽度百分比作为内边距 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7fa;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.table-container {
    background-color: #fff;
    border-radius: 1.5vw; /* 使用视口宽度百分比作为圆角 */
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1); /* 使用视口宽度百分比作为阴影参数 */
    overflow: hidden;
    width: 90vw; /* 使用视口宽度百分比作为宽度 */
    max-width: 1000px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background-color: #2c3e50;
    color: white;
}

th, td {
    padding: 1.5vw 2vw; /* 使用视口宽度百分比作为内边距 */
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    font-size: 2vw; /* 使用视口宽度百分比作为字体大小 */
}

th {
    font-weight: 600;
}

tbody tr:hover {
    background-color: #f1f8e9;
    transition: background-color 0.3s ease;
}

tr:last-child td {
    border-bottom: none;
}

/* 假设 Footer 组件有一些样式 */
Footer {
    display: block;
    text-align: center;
    padding: 2vw; /* 使用视口宽度百分比作为内边距 */
    margin-top: 3vw; /* 使用视口宽度百分比作为外边距 */
    background-color: #2c3e50;
    color: white;
    width: 90vw; /* 使用视口宽度百分比作为宽度 */
    border-radius: 1vw; /* 使用视口宽度百分比作为圆角 */
}

/* 媒体查询，当屏幕宽度小于 768px 时调整样式 */
@media (max-width: 768px) {
    th, td {
        font-size: 3vw;
        padding: 2vw 2.5vw;
    }
}
</style>

<script setup lang="ts">
    import Footer from '@/component/footer.vue'
    import { useOrderStore } from '@/store/orderStore.ts';

    
    const orderStore = useOrderStore();
    const orders = orderStore.orders;
</script>